<template>
  <div class='container'>
    <el-card>
      <!-- 面包屑 -->
  <el-breadcrumb separator-class="el-icon-arrow-right" v-if="query.name">
  <el-breadcrumb-item >学科管理</el-breadcrumb-item>
  <el-breadcrumb-item>{{query.name}}</el-breadcrumb-item>
  <el-breadcrumb-item>目录管理</el-breadcrumb-item>
  </el-breadcrumb>
  <el-divider></el-divider>

  <!-- 头部搜索框 -->
      <div class="nav">
      <div class="n-left">

      <el-form :inline="true">

      <el-form-item label="目录名称">
      <el-input style="width:200px" v-model="sm.directoryName" @change="gserch"></el-input>
      </el-form-item>

      <el-form-item label="状态">
      <el-select v-model="sm.state"  placeholder="请选择">
      <el-option  v-for="(item,index) in hstatus" :key="index" :value="item.value" :label="item.label" @change="serchh = 0"></el-option>
      </el-select>
      </el-form-item>
      <el-button  style="margin-left: 10px;" @click="rem">清除</el-button>
      <el-button type="primary" @click="serce">搜索</el-button>
      </el-form>

      </div>
    <div class="n-right">
      <el-button type="text" v-if="query.name" class="el-icon-back" @click="$router.push('./list')">返回学科</el-button>
    <el-button type="success" class="el-icon-edit" @click="addedit">新增目录</el-button>
    </div>

    </div>
    <!-- 数据条数显示 -->
    <el-alert
    type="info"
    style="margin-top: 20px;"
    :closable="false"
    show-icon>
    <span>数据一共{{counts}}条</span>
  </el-alert>
  <!-- 目录列表渲染 -->
<el-table
      :data="list1"
      style="width: 100%">
      <el-table-column
      type="index"
        label="序号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="subjectName"
        label="所属学科"
        width="180">
      </el-table-column>
      <el-table-column
        prop="directoryName"
        label="目录名称">
      </el-table-column>
      <el-table-column
        prop="username"
        label="创建者">
      </el-table-column>
      <el-table-column
        prop="addDate"
        label="创建日期">
        <template v-slot="{row}">
          {{dayform(row.addDate)}}
        </template>
      </el-table-column>
      <el-table-column
        prop="totals"
        label="面试题数量">
      </el-table-column>
      <el-table-column
        prop="state"
        label="状态">
        <template v-slot="{row}">
        {{row.state === 1 ?'已启用' :  '已禁用'}}
        </template>
      </el-table-column>
      <el-table-column
        label="操作">
      <template v-slot="{row}">
        <el-button type="text" @click="states(row)"> {{row.state === 1 ?  '禁用': '启用'}}</el-button>
        <el-button type="text" :disabled="row.state === 0 ? true:false" @click="amend(row)">修改</el-button>
        <el-button type="text" :disabled="row.state === 0 ? true:false" @click="hdel(row.id)">删除</el-button>
      </template>

      </el-table-column>
    </el-table>

<!-- 修改与增加 -->
<el-dialog
  title="提示"
  :visible.sync="dialogVisible"
  width="30%"
  @close="gclose"
  :close-on-click-modal="false"
  :close-on-press-escape="false"
  >
<direct
  ref="dir"
  v-if="dialogVisible"
  @dir="directorys"
  @dialog="dialogVisible = false"
  :query="query"
  :isEdit="isEdit"
  :id="cuid">
  </direct>
</el-dialog>
<!-- 分页 -->
  <el-pagination
      v-if="!query.name"
      class="pagination"
      background
      @size-change="heSizeChange"
      @current-change="hCurrentChange"
      :current-page="q.page"
      :page-size="q.pagesize"
      layout="  prev, pager, next,sizes, jumper"
      :total="counts"
      :page-sizes="[10, 15, 20, 25]"
      >
    </el-pagination>
    </el-card>
  </div>
</template>

<script>
import { changeState, list, remove } from '../../api/hmmm/directorys'
import dayjs from 'dayjs'
import { status } from '../../api/hmmm/constants'
import direct from '../components/directorys-add.vue'
// 状态
const gstatus = {}
status.forEach(item => {
  gstatus[item.value] = item.label
})
export default {
  components: {
    direct
  },
  data () {
    return {
      serchh: 0,
      cuid: 0,
      query: this.$route.query,
      isEdit: false,
      dialogVisible: false,
      list1: [], // 列表数据
      counts: 0, // 总条数
      simples: [],
      hstatus: [],
      q: {
        page: 1,
        pagesize: 10
      },
      sm: {
        directoryName: '', // 新增目录名称
        state: ''
      }
    }
  },
  created () {
    this.directorys()
  },
  methods: {
    async  directorys (data) {
      // console.log(this.query)
      let res = null
      if (this.query.name) {
        res = await list({ subjectID: this.query.id, ...data })
      } else {
        res = await list({ ...this.q, ...data })
      }
      this.list1 = res.data.items
      this.counts = res.data.counts
      this.hstatus = status
      // console.log(this.hstatus)
    },
    // 转换日期
    dayform (data) {
      // console.log(data)
      return dayjs(data).format('YYYY-MM-DD HH:mm:ss')
    },

    // 修改操作状态
    async  states (row) {
      row.state === 1 ? row.state = 0 : row.state = 1
      // console.log(row.state)
      try {
        await changeState(row)
        this.$message.success('修改状态成功')
        // console.log(res)
      } catch (e) {
        console.log(e)
      }
    },
    // 删除
    async  hdel (id) {
      // console.log(id)
      const res = await this.$confirm('真的要删除吗？', '提示', { type: 'warning' }).catch(e => e)
      if (res !== 'confirm') return
      try {
        await remove({ id: id })
        if (this.list1.length === 1 && this.q.page > 1) {
          this.q.page--
        }
        this.directorys()
        this.$message.success('删除成功')
        // console.log(res)
      } catch (e) {
        console.log(e)
      }
    },
    // 新增目录
    async addedit () {
      this.isEdit = false
      this.dialogVisible = true
      await this.$nextTick()
      this.$refs.dir.haddedit()
    },
    heSizeChange (size) {
      this.q.pagesize = size
      if (this.serchh === 0) {
        this.directorys()
      } else {
        this.serce()
      }
    },
    hCurrentChange (page) {
      console.log(this.serch)
      this.q.page = page
      if (this.serchh === 0) {
        this.directorys()
      } else {
        this.serce()
      }
    },
    // 修改
    async  amend (row) {
      // console.log(row)
      this.isEdit = true
      this.dialogVisible = true
      this.cuid = row.id
      await this.$nextTick()
      this.$refs.dir.amendd()
    },
    // 控制请求变化
    gserch () {
      this.serchh = 0
    },
    // 搜索
    serce (e) {
      this.serchh = 1
      // console.log(e)
      if (e) this.q.page = 1
      // console.log(this.sim.state, typeof this.sim.directoryName)
      if (this.sm.directoryName === '' && this.sm.state === '') {
        this.directorys()
      } else if (this.sm.state === '') {
        this.directorys({
          directoryName: this.sm.directoryName
        })
      } else {
        this.directorys({
          directoryName: this.sm.directoryName,
          state: this.sm.state
        })
      }
    },
    // 清除
    rem () {
      this.sm.directoryName = ''
      this.sm.state = ''
      this.q.page = 1
      this.directorys()
    },
    // // 关闭弹窗，清空表单
    gclose () {
      this.directorys()
      this.rem()
      this.$refs.dir.hclose()
    }

  }
}
</script>

<style scoped>
.zt{
margin-left: 50px;
margin-right: 10px;
}
.nav{
  display: flex;
  justify-content: space-between;
}
.but{
display: flex;
justify-content: flex-end;
}
.pagination{
margin-top: 20px;
padding-bottom: 20px;
float: right;
}
</style>
